<template>
  <div class="social-view">
    <div class="page-header">
      <h2>社交分享</h2>
      <p>发现和分享精彩的穿搭灵感</p>
    </div>

    <!-- 导航标签 -->
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="发现" name="discover">
        <DiscoverTab />
      </el-tab-pane>
      
      <el-tab-pane label="动态" name="feed">
        <FeedTab />
      </el-tab-pane>
      
      <el-tab-pane label="我的分享" name="myshares">
        <MySharesTab />
      </el-tab-pane>
      
      <el-tab-pane label="关注" name="following">
        <FollowingTab />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DiscoverTab from '@/components/social/DiscoverTab.vue'
import FeedTab from '@/components/social/FeedTab.vue'
import MySharesTab from '@/components/social/MySharesTab.vue'
import FollowingTab from '@/components/social/FollowingTab.vue'

const activeTab = ref('discover')

const handleTabChange = (tabName) => {
  console.log('切换到标签:', tabName)
}
</script>

<style scoped>
.social-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>
